<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/assets/css/admin.css">
    <title>${(shop.name)!''}预约</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
    <script src="/assets/js/amazeui.ie8polyfill.min.js"></script>
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/amazeui.min.js"></script>
    <script src="/assets/js/app.js"></script>
    <link rel="stylesheet" href="/weui/weui.css"/>
    <link rel="stylesheet" href="/weui/example.css"/>
    <script src="/weui/zepto.min.js"></script>
    <!--<script src="/weui/example.js"></script>-->
    <link rel="stylesheet" href="/layer/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="/layer/css/layui.css">

    <!--<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">-->


</head>
<body>
<header data-am-widget="header"
        class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
    </div>

    <h1 class="am-header-title">
        <a href="#title-link" class="">${(shop.name)!''}预约</a>
    </h1>

    <div class="am-header-right am-header-nav">
    </div>

    <script id="index" type="text/html">
        <h1>{{ d.date }}</h1>

        <ul class="am-avg-sm-3 am-avg-md-5 am-avg-lg-8 am-thumbnails">
            {{# for(var i = 0, len = d.times.length; i < len; i++){ }}
            {{# if (d.times[i].flag) { }}
            <li>
                <#assign buttonId = 'timeButton'/>
                {{# if (d.times[i].selected) { }}
                <button id="${buttonId}" type="button" class="am-btn am-btn-success am-btn-block"
                        value="{{ d.times[i].index }}" onclick="onFFFF(this)">{{ d.times[i].time }}-{{ d.times[i].flag }}
                </button>
                {{# } else { }}
                <button id="timeButton" type="button" class="am-btn am-btn-secondary am-btn-block"
                        value="{{ d.times[i].index }}" onclick="onFFFF(this)">{{ d.times[i].time }}-{{ d.times[i].flag }}
                </button>
                {{# } }}
            </li>
            {{# } else { }}
            {{# } }}
            {{# } }}
        </ul>
    </script>

    <div id="view">
    </div>

    <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
    <ul class="am-avg-sm-3 am-avg-md-5 am-avg-lg-8 am-thumbnails">
        <#list times as time>
            <li>
                <#if (time.flag)>
                    <div hidden>
                        <a href="index?shopId=${shopId}&itemId=${itemId}&selectionId=${selectionId}&time=${time.index}&date=${date}">

                        </a>
                    </div>
                    <#if (time.selected)>
                        <button id="btn1" type="button" class="am-btn am-btn-success am-btn-block" value="123">
                            $${time.time}
                            <div hidden>
                                <i class="weui_icon_success_no_circle" hidden></i>
                            </div>
                        </button>
                    </#if>
                    <#if !(time.selected)>
                        <button type="button" class="am-btn am-btn-secondary am-btn-block">${time.time}</button>
                    </#if>
                </#if>
                <#if !(time.flag)>
                    <button type="button" class="am-btn am-btn-default am-btn-block" disabled="disabled">${time.time}
                    </button>
                </#if>
            </li>
        </#list>
    </ul>
    <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
    <div class="am-text-center am-text-lg">
        <ol class="am-breadcrumb">
            <li><p>您已选择</p></li>
            <li>${date}</li>
            <li>${(timeString)!'未选择时间'}</li>
            <li>${shop.name}</li>
            <li>${itemName}</li>
            <li>${selectionName}</li>
        </ol>
    </div>

    <form action="bookConfirm" method="get" onsubmit="return checkValue();">

        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">姓名</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input id="nameField" class="weui_input" type="text" name="bkBooking.name" placeholder="请输入客人姓名"/>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">电话</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input id="mobileField" class="weui_input" type="number" name="bkBooking.phone" pattern="[0-9]*"
                           placeholder="请输入客人电话" minlength="11" required/>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">备注</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input id="markField" class="weui_input" type="text" name="bkBooking.remark"
                           placeholder="请输入备注(选填)"/>
                </div>
            </div>
        </div>
        <input type="text" name="bkBooking.shopId" value="${shopId}" hidden/>
        <input type="text" name="bkBooking.selectionId" value="${selectionId}" hidden/>
        <input type="text" name="bkBooking.itemId" value="${itemId}" hidden/>
        <input type="text" name="bkBooking.bookTime" value="${time}" hidden/>
        <input type="text" name="bkBooking.bookDay" value="${date}" hidden/>
        </br>
        <input class="weui_btn weui_btn_primary" type="submit" value="提交">
    </form>

</header>

</body>
<script>

    function onFFFF(element) {
        var value = $(element).attr('value');
        getShopsInfo(value);
    }

    $("#bbbbb").click(function () {
        alert(3331);
    });

    $("#btn1").click(function () {
        alert(333333);
        var value = $(this).attr("value")
        alert("Text" + value);
    });

    function req() {
        var time = 44;
        $.ajax({
            type: "POST",
            url: 'index?shopId=19&itemId=26&selectionId=27&time=' + time + '&json=123',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (message) {
                var gettpl = document.getElementById('index').innerHTML;
                laytpl(gettpl).render(message, function (html) {
                    document.getElementById('view').innerHTML = html;
                });
            },
            error: function (message) {
                alert('error')
            }
        });
    }
    function getShopsInfo(time) {
        //http://www.bk.com:9090/bk/index?shopId=19&itemId=26&selectionId=27&time=44&date=2016-08-29
        $.ajax({
            type: "POST",
            url: 'index?shopId=19&itemId=26&selectionId=27&time=' + time + '&json=123',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (message) {
                var gettpl = document.getElementById('index').innerHTML;
                laytpl(gettpl).render(message, function (html) {
                    document.getElementById('view').innerHTML = html;
                });
            },
            error: function (message) {
                alert('error')
            }
        });
    }

    getShopsInfo(44);
</script>
</html>